<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-form">
        <div class="login-logo">
          <img class="login-icon" src="@/assets/logo.svg" alt="" />
          <h2 class="logo-text">vue3-antd-admin</h2>
        </div>
        <a-form ref="formRef" class="form-login" :model="loginForm" @finish="onFinish">
          <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
            <a-input v-model:value="loginForm.username" placeholder="用户名:admin" size="large">
              <template #prefix>
                <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
            <a-input-password v-model:value="loginForm.password" placeholder="密码:123456" size="large">
              <template #prefix>
                <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item class="login-btn">
            <a-button type="primary" size="large" shape="round" html-type="submit"> 登录</a-button>
            <a-button size="large" shape="round" @click="resetForm"> 重置 </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { FormInstance, message } from "ant-design-vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { loginApi } from "@/api/modules/user/index";
import { Login } from "@/api/interface";
import { useUserStore } from "@/store/modules/user";
import { HOME_URL } from "@/config";

const router = useRouter();
const userStore = useUserStore();
const loginForm = reactive<Login.ReqLoginForm>({
  username: "",
  password: ""
});
const formRef = ref<FormInstance>();
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields(); //重置表单
  }
};
const onFinish = () => {
  loginApi(loginForm).then(res => {
    if (res.code === 200) {
      message.success("登录成功！");
      userStore.setToken(res.data.token);
      router.replace(HOME_URL);
    }
  });
};
</script>
<style lang="scss" scoped>
.login-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("@/assets/images/login_bg.svg");
  background-size: cover;
  .login-box {
    .login-form {
      width: 420px;
      padding: 50px 40px 45px;
      background-color: var(--el-bg-color);
      border-radius: 10px;
      box-shadow: rgb(0 0 0 / 10%) 0 2px 10px 2px;
      .login-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 45px;
        .login-icon {
          width: 60px;
          height: 52px;
        }
        .logo-text {
          padding: 0 0 0 25px;
          margin: 0;
          font-size: 28px;
          font-weight: bold;
          color: #34495e;
          white-space: nowrap;
        }
      }

      .login-btn {
        width: 100%;
        margin-top: 10px;
        white-space: nowrap;
        :deep(.ant-form-item-control-input-content) {
          display: flex;
          justify-content: space-between;
          .ant-btn {
            width: 120px;
          }
        }
      }
    }
  }
}

@media screen and (width <= 600px) {
  .login-form {
    width: 97% !important;
  }
}
</style>
